<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>抽奖转盘</title>
		<style type="text/css">
			#myCanvas{
				background-color: #cccccc;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="300"></canvas>
		<script type="text/javascript">
			var myCanvas=document.getElementById("myCanvas");
			var ctx=myCanvas.getContext("2d");
			ctx.font="16px '黑体'";
			ctx.fillText("您中奖的产品：洗衣机",76,30);
			ctx.fillStyle="#5c5c5c";
			
			
			ctx.beginPath();
			   ctx.strokeStyle="#484414";
			   ctx.fillStyle="#33cc33";
			   ctx.translate(136,147);
			   ctx.moveTo(0,0);
			   ctx.arc(0,0,90,0.125*Math.PI,0.375*Math.PI);
			   ctx.closePath();
			   ctx.fill();
			   ctx.stroke();
			   
			   ctx.save();
			   ctx.rotate(0.25*Math.PI);
			   ctx.globalCompositeOperation="source-over";
			   ctx.font="16px Cambria";
			   ctx.fillStyle="#0f550f";
			   ctx.fillText("宝马",45,5);
			   ctx.restore();
			   
			   ctx.beginPath();
			   ctx.strokeStyle="#548327";
			   ctx.fillStyle="#01ffff";
			   ctx.moveTo(0,0);
			   ctx.arc(0,0,90,0.375*Math.PI,0.625*Math.PI);
			   ctx.closePath();
			   ctx.fill();
			   ctx.stroke();
			   
			   ctx.save();
			   ctx.rotate(0.5*Math.PI);
			   ctx.globalCompositeOperation="source-over";
			   ctx.font="16px Cambria";
			   ctx.fillStyle="#0f550f";
			   ctx.fillText("摩托车",42,5);
			   ctx.restore();
			   
			  ctx.beginPath();
			  ctx.strokeStyle="#548327";
			  ctx.fillStyle="#ffff01";
			  ctx.moveTo(0,0);
			  ctx.arc(0,0,90,0.625*Math.PI,0.875*Math.PI);
			  ctx.closePath();
			  ctx.fill();
			  ctx.stroke();
			  
			  ctx.save();
			  ctx.rotate(0.75*Math.PI);
			  ctx.globalCompositeOperation="source-over";
			  ctx.font="16px Cambria";
			  ctx.fillStyle="#0f550f";
			  ctx.fillText("苹果6s",42,5);
			  ctx.restore();
			  
			  ctx.beginPath();
			  ctx.strokeStyle="#548327";
			  ctx.fillStyle="#6599ff";
			  ctx.moveTo(0,0);
			  ctx.arc(0,0,90,0.875*Math.PI,1.125*Math.PI);
			  ctx.closePath();
			  ctx.fill();
			  ctx.stroke();
			  
			  ctx.save();
			  ctx.rotate(Math.PI);
			  ctx.globalCompositeOperation="source-over";
			  ctx.font="16px Cambria";
			  ctx.fillStyle="#0f550f";
			  ctx.fillText("电脑",42,5);
			  ctx.restore();
			  
			  ctx.beginPath();
			  ctx.strokeStyle="#548327";
			  ctx.fillStyle="#cd9933";
			  ctx.moveTo(0,0);
			  ctx.arc(0,0,90,1.125*Math.PI,1.375*Math.PI);
			  ctx.closePath();
			  ctx.fill();
			  ctx.stroke();
			  
			  ctx.save();
			  ctx.rotate(1.25*Math.PI);
			  ctx.globalCompositeOperation="source-over";
			  ctx.font="16px Cambria";
			  ctx.fillStyle="#0f550f";
			  ctx.fillText("电视",42,5);
			  ctx.restore();
			  
			  ctx.beginPath();
			  ctx.strokeStyle="#548327";
			  ctx.fillStyle="#989933";
			  ctx.moveTo(0,0);
			  ctx.arc(0,0,90,1.375*Math.PI,1.625*Math.PI);
			  ctx.closePath();
			  ctx.fill();
			  ctx.stroke();
			  
			  ctx.save();
			  ctx.rotate(1.5*Math.PI);
			  ctx.globalCompositeOperation="source-over";
			  ctx.font="16px Cambria";
			  ctx.fillStyle="#0f550f";
			  ctx.fillText("冰箱",42,5);
			  ctx.restore();
			  
			  ctx.beginPath();
			  ctx.strokeStyle="#548327";
			  ctx.fillStyle="#343399";
			  ctx.moveTo(0,0);
			  ctx.arc(0,0,90,1.625*Math.PI,1.875*Math.PI);
			  ctx.closePath();
			  ctx.fill();
			  ctx.stroke();
			  
			  ctx.save();
			  ctx.rotate(1.75*Math.PI);
			  ctx.globalCompositeOperation="source-over";
			  ctx.font="16px Cambria";
			  ctx.fillStyle="gold";
			  ctx.fillText("空调",42,5);
			  ctx.restore();
			  
			  ctx.beginPath();
			  ctx.strokeStyle="#548327";
			  ctx.fillStyle="#cd9933";
			  ctx.moveTo(0,0);
			  ctx.arc(0,0,90,1.875*Math.PI,2.125*Math.PI);
			  ctx.closePath();
			  ctx.fill();
			  ctx.stroke();
			  
			  ctx.save();
			  ctx.rotate(2*Math.PI);
			  ctx.globalCompositeOperation="source-over";
			  ctx.font="16px Cambria";
			  ctx.fillStyle="#0f550f";
			  ctx.fillText("洗衣机",42,5);
			  ctx.restore();
			  
			  ctx.beginPath();
			  ctx.globalCompositeOperation="source-over";
			  ctx.fillStyle="#ffffff";
			  ctx.arc(0,0,41,0,2*Math.PI);
			  ctx.closePath();
			  ctx.fill();
		</script>
	</body>
</html>
